<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <style type="text/css">
        div>ul li~p{
            color:red;
        }

        li:nth-of-type(even){
            color: red;
        }
    </style>
</head>
<body>

<div>
    <h1>jQuery</h1>
    <ul>
        <li style="display: none">基本选择器</li>
        <ul>
            <li>ID选择器</li>
            <li>类选择器</li>
            <li>标签选择器</li>
            <p>选择器</p>
            <li>并集选择器</li>
            <li>全局选择器</li>
        </ul>
        <li>层次选择器</li>
        <ul>
            <li>后代选择器</li>
            <li>子代选择器</li>
            <li>相邻选择器</li>
            <li>同辈选择器</li>
        </ul>
    </ul>
    <a title>后代选择器</a> <br>
    <a href="#">子代选择器</a><br>
    <a href="http://baidu.com">相邻选择器</a><br>
    <a href="./shangji1/book.html">同辈选择器</a><br>
    <a href="http://bdqn.cn">属性选择器</a>
</div>
<script type="text/javascript">
    $(function () {
        //之后
        // $("div>ul>li").css("color", "red");
        //之后
        // $("p~li").css("color", "red");
        // $("p").siblings().css("color","red");

        // $("a[href*='b']").css("color","red")

        $("li:visible:even").css("color","red"); // 0
        // $("li:odd").css("color","#ccc");

        $("#id#a")
    })

</script>
</body>
</html>